<template>
  <!-- 轮播图列表父组件 -->
  <div class="carousel-index">
    <!-- 引用公共表格组件 -->
    <!-- 表格 -->
    <div v-if="rightcom !== 'ArticleListIndex'">
      <el-button
        class="custom-btn none"
        size="small"
        @click="handleBackClick()"
      >
        <i class="el-icon-arrow-left primary-color"></i> 返回</el-button
      >
    </div>

    <div v-if="rightcom === 'ArticleListIndex'">
      <CustomTable
        :tableData="tableData"
        :tableHeaders="tableHeaders"
        :showSelection="true"
        :pagination="pagination"
        :loading="tableLoading"
        tableHeight="calc(100vh - 200px)"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSelectionChange="handleSelectionChange"
      >
        <!-- 顶部操作按钮插槽 -->
        <template #top-actions>
          <div class="table-buttons">
            <CustomButton
              v-for="button in actionButtons.topArticleButtons"
              :key="button.id"
              :text="button.text"
              size="medium"
              :icon="button.icon"
              fontSize="14px"
              :customStyle="button.customStyle"
              @click="handleClick(button)"
            />
          </div>
        </template>
        <template #action="{ row }">
          <div class="action-buttons">
            <el-button
              v-for="button in actionButtons.tableArticleButtons"
              :key="button.id"
              class="custom-btn none"
              size="small"
              @click="handleClick(button, row)"
              >{{ button.text }}</el-button
            >
          </div>
        </template>
        <template #status="{ row, column, index }">
          <div v-if="column.property === 'status'">
            <!-- 根据状态值显示不一样的小按钮颜色 -->
            <span class="status one" v-if="row[column.property] == 1"
              >已发布</span
            >
            <span class="status two" v-if="row[column.property] == 2"
              >草稿</span
            >
            <span class="status three" v-if="row[column.property] == 3"
              >已下架</span
            >
          </div>
        </template>
      </CustomTable>
    </div>
    <div v-else>
      <ArticleListEdit :datas="selectedRows[0]" />
    </div>
    <!-- 发布完成 -->
    <CustomElDialog
      :visible.sync="showDialog"
      width="500px"
      height="310px"
      close-btn-position="top-right"
      :has-top-image="true"
      top-image-top="-70px"
      top-image-position="center"
      :close-on-overlay-click="true"
      dialogBgGradient="linear-gradient(180deg, #B7D7FF 0%, #FFFFFF 59%)"
      dialogRadius="15px"
    >
      <template #topContent>
        <div class="custom-top-content">
          <img :src="$serverImgUrl + 'popup10.png'" style="max-height: 150px" />
        </div>
      </template>
      <template #content>
        <div
          class="custom-content"
          style="margin-top: 10px; padding-left: 10px; text-align: center"
        >
          <h2
            style="
              font-size: 30px;
              font-weight: bold;
              color: #348cf8;
              padding-top: 20px;
            "
          >
            恭喜发布完成
          </h2>
          <p
            style="
              margin-top: 30px;
              margin-right: 25px;
              font-size: 16px;
              font-weight: normal;
              line-height: 25px;
              letter-spacing: 0em;
              color: #26426c;
              text-align: center;
            "
          >
            <span style="padding-left: 30px"> 官网链接</span>
            <a
              href="https://example.com/payment-confirm"
              class="help-link"
              target="_blank"
            >
              https://example.com/payment-confirm
            </a>
            <i class="el-icon-document-copy f25 color-back"></i>
          </p>
        </div>
      </template>
      <template #footer>
        <div class="custom-footer" style="text-align: center">
          <el-button class="cancel-btn" style="background-color: transparent"
            >添加到公众号菜单</el-button
          >
          <el-button class="confirm-btn" style="width: 100px; margin-left: 50px"
            >确认</el-button
          >
        </div>
      </template>
    </CustomElDialog>
    <!-- 发布弹窗-->
    <CustomElDialog :visible.sync="showDialog" width="500px" height="auto">
      <template #content>
        <div>
          <div style="margin-top: -30px">
            <icon-title
              title="编辑推文排序"
              :img-src="require('@/assets/home/admin/home/text_title.png')"
            />
          </div>
          <CustomTable
            :tableData="dialogTableData"
            :tableHeaders="dialogTableHeader"
            :pagination="dialogPagination"
            :isShowPagination="false"
            :loading="dialogTableLoading"
          >
            <template #action="{ row, column, index }">
              <div style="border: 2px solid red">
                <el-button
                  v-if="index == 0"
                  class="custom-btn none"
                  size="small"
                  @click="togglePosition(index, 'top')"
                  :disabled="dialogTableData.length <= 1"
                  >下移</el-button
                >
                <div v-else-if="index === dialogTableData.length - 1">
                  <el-button
                    class="custom-btn none"
                    size="small"
                    @click="togglePosition(index, 'top')"
                    :disabled="dialogTableData.length <= 1"
                    >上移</el-button
                  >
                </div>
                <div v-else>
                  <el-button
                    class="custom-btn none"
                    size="small"
                    @click="togglePosition(index, 'top')"
                    :disabled="dialogTableData.length <= 1"
                    >上移</el-button
                  >
                  <el-button
                    class="custom-btn none"
                    size="small"
                    @click="togglePosition(index, 'bottom')"
                    :disabled="dialogTableData.length <= 1"
                    >下移</el-button
                  >
                </div>
              </div>
            </template>
          </CustomTable>
          <div style="display: flex; margin: 10px">
            <div
              style="
                margin: 10px;
                background-color: #348cf8;
                color: #fff;
                text-align: center;
                width: 100px;
                font-size: 13px;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
              "
            >
              预览效果图
            </div>
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <img :src="$serverImgUrl + '100.png'" style="max-height: 500px" />
              <div style="margin-top: 10px">
                <el-button
                  class="cancel-btn"
                  style="
                    padding: 0 30px;
                    height: 30px;
                    font-size: 13px;
                    border-color: #348cf8;
                    color: #348cf8;
                    line-height: 30px;
                  "
                  >取消</el-button
                >
                <el-button
                  class="confirm-btn"
                  style="
                    padding: 0 30px;
                    height: 30px;
                    font-size: 13px;
                    border-color: #348cf8;
                    color: #348cf8;
                    line-height: 30px;
                  "
                  >确认</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </template>
    </CustomElDialog>
  </div>
</template>
<script>
import { color } from "echarts";
// 引入文章表格的列配置
import { articleTableHeaders, dialogTableHeaders, actionButtons } from "@/utils/defaultData";
export default {
  name: "ArticleListIndex",
  props: {
    datas: Object,
  },
  data() {
    return {
      dialogTableData: [
        { articleId: 1, articleName: "张三", readCount: 1 },
        { articleId: 2, articleName: "李四", readCount: 2 },
        { articleId: 3, articleName: "王五", readCount: 3 },
      ],
      confirmLoading: false,
      loading: false,
      draggingIndex: -1, // 正在拖拽的行索引
      dropIndex: -1, // 目标放置索引
      isDragging: false, // 是否处于拖拽状态
      // 动态渐变背景
      dialogGradient: "linear-gradient(180deg, #DDF1FF 0%, #FFFFFF 100%)",
      backgroundImage: this.$serverImgUrl + "popup9.png",
      selectedOption: 1,
      // 发布弹窗
      showDialog: false,
      rightcom: "ArticleListIndex",
      pagination: {
        total: 14,
        currentPage: 1,
        pageSize: 10,
      },
      dialogPagination: {
        total: 10,
        currentPage: 1,
        pageSize: 10,
      },
      scope: {},
      // 选中的行数据
      selectedRows: [],
      columns: [],
      tableLoading: false,
      dialogTableLoading: false,
      // 新增按钮配置数组
      actionButtons: actionButtons,
      tableData: [
        {
          articleId: "1001",
          articleName: "元嘉草草，封...",
          readCount: 100,
          forwardCount: 50,
          collectCount: 30,
          commentCount: 20,
          publishTime: "2025-09-11 10:00:00",
          publishUser: "admin",
          status: 1,
        },
        {
          articleId: "1002",
          articleName: "元嘉草草，封...",
          readCount: 100,
          forwardCount: 50,
          collectCount: 30,
          commentCount: 20,
          publishTime: "2025-09-11 10:00:00",
          publishUser: "admin",
          status: 2,
        },
        {
          articleId: "1003",
          articleName: "元嘉草草，封...",
          readCount: 100,
          forwardCount: 50,
          collectCount: 30,
          commentCount: 20,
          publishTime: "2025-09-11 10:00:00",
          publishUser: "admin",
          status: 3,
        },
        {
          articleId: "1004",
          articleName: "元嘉草草，封...",
          readCount: 100,
          forwardCount: 50,
          collectCount: 30,
          commentCount: 20,
          publishTime: "2025-09-11 10:00:00",
          publishUser: "admin",
          status: 2,
        },
        {
          articleId: "1005",
          articleName: "元嘉草草，封...",
          readCount: 100,
          forwardCount: 50,
          collectCount: 30,
          commentCount: 20,
          publishTime: "2025-09-11 10:00:00",
          publishUser: "admin",
          status: 1,
        },
      ],
      // 使用文章表格的列配置
      tableHeaders: articleTableHeaders,
      dialogTableHeader: dialogTableHeaders, // 发布弹窗表格列配置
    };
  },
  create() {
    this.getList();
  },
  mounted() {
    console.log("打印默认数据", this.tableHeaders);
  },
  methods: {
    // 切换位置功能（根据当前位置自动执行上移或下移）
    togglePosition(index, type) {
      if (this.dialogTableData.length <= 1) return;

      const newData = [...this.dialogTableData];

      // 如果是第一行，执行下移
      if (index === 0 || type === "bottom") {
        // 与下一行交换位置
        const temp = newData[index];
        newData[index] = newData[index + 1];
        newData[index + 1] = temp;
        this.dialogTableData = newData;
        this.$message.success(`已将第${index + 1}行下移`);
      }
      // 如果是最后一行，执行上移
      else if (index === this.dialogTableData.length - 1 || type === "top") {
        // 与上一行交换位置
        const temp = newData[index];
        newData[index] = newData[index - 1];
        newData[index - 1] = temp;
        this.dialogTableData = newData;
        this.$message.success(`已将第${index + 1}行上移`);
      }
    },
    // 选项切换方法
    selectedOptionChange(option) {
      this.selectedOption = option;
    },
    // 行点击处理方法
    handleRowClick(button, row) {
      console.log("点击了按钮", button, row);
      // 可以在这里添加按钮点击逻辑
      if (button.handler) {
        this[button.handler](button, row);
      }
    },
    // 上架
    handleOnlineClick(button, row) {
      console.log("表格行点击了上架按钮", button, row);
      // 可以在这里添加上架逻辑
    },
    // 编辑
    handleRowEditClick(button, row) {
      console.log("表格行点击了编辑按钮", button, row);
      // 可以在这里添加编辑逻辑
      this.rightcom = "ArticleListEdit";
    },
    // 删除
    handleRowDeleteClick(button, row) {
      console.log("表格行点击了删除按钮", button, row);
      // 可以在这里添加删除逻辑
    },
    // 返回上一页
    handleBackClick() {
      console.log("点击了返回按钮", this.rightcom);
      // 可以在这里添加返回逻辑
      this.rightcom = "ArticleListIndex";
    },
    // 按钮点击处理方法
    handleClick(button, row) {
      console.log("点击了按钮", button);
      // 可以在这里添加按钮点击逻辑
      if (button.handler) {
        this[button.handler](button, row);
      }
    },
    // 按钮点击处理方法
    handleAddClick(button) {
      console.log("点击了新增按钮");
      this.rightcom = "ArticleListEdit";
      // 可以在这里添加新增逻辑
    },

    handleEditClick(button) {
      console.log("点击了修改按钮", button, this.selectedRows);
      // 可以在这里添加修改逻辑，通常需要检查是否有选中行
      if (this.selectedRows.length === 0) {
        this.$message.warning("请先选择要修改的数据");
        return;
      }
      // 修改逻辑...
      this.rightcom = "ArticleListEdit";
    },
    // 发布文章
    handleReleaseClick(button) {
      console.log("点击了发布按钮", button, this.selectedRows);
      this.showDialog = true;
      // 可以在这里添加发布逻辑，通常需要检查是否有选中行
      // if (this.selectedRows.length === 0) {
      //   this.$message.warning("请先选择要发布的数据");
      //   return;
      // }
      // // 发布逻辑...
      // this.showDialog = true;
    },

    handleDeleteClick() {
      console.log("点击了删除按钮");
      // 可以在这里添加删除逻辑，通常需要检查是否有选中行并二次确认
      // if (this.selectedRows.length === 0) {
      //   this.$message.warning("请先选择要删除的数据");
      //   return;
      // }
      // 删除确认对话框和删除逻辑...
      this.$confirm(
        "确认删除选中的" + this.selectedRows.length + "条数据吗？",
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 执行删除操作
          this.$message({
            type: "success",
            message: "删除成功",
          });
          // 刷新数据列表
          this.getList();
        })
        .catch(() => {
          // 取消删除操作
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 处理每页显示条数变化
    handleSizeChange(newPagination) {
      console.log("每页条数变化", newPagination);
      this.pagination = newPagination;

      // this.getList();
    },
    // 处理页码变化
    handleCurrentChange(newPagination) {
      this.tableLoading = true;
      console.log("页码变化", newPagination);
      this.tableData = [
        {
          name: "最后加的",
          type: "男",
          image:
            "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
          uploadTime: "2025-09-11 10:00:00",
          uploadUser: "admin",
          status: false,
        },
      ];
      // this.pagination = newPagination;
      // this.getList();
    },
    // 处理选择事件
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log("父组件中选项变更了", this.selectedRows);
    },
    handleStatusChange(row, prop, val) {
      console.log("改变了", row, prop, val);
    },
    getList() {
      // 获取数据
      this.tableLoading = true;
      fetchList(
        Object.assign(
          { currrent: this.page.current, size: this.page.size },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 上移功能
    moveUp(index) {
      if (index > 0) {
        // 创建数据副本以触发Vue的响应式更新
        const newData = [...this.dialogTableData];
        // 交换位置
        const temp = newData[index];
        newData[index] = newData[index - 1];
        newData[index - 1] = temp;
        // 更新数据
        this.dialogTableData = newData;
        this.$message.success(`已将第${index + 1}行上移`);
      }
    },

    // 下移功能
    moveDown(index) {
      if (index < this.dialogTableData.length - 1) {
        // 创建数据副本以触发Vue的响应式更新
        const newData = [...this.dialogTableData];
        // 交换位置
        const temp = newData[index];
        newData[index] = newData[index + 1];
        newData[index + 1] = temp;
        // 更新数据
        this.dialogTableData = newData;
        this.$message.success(`已将第${index + 1}行下移`);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.carousel-index {
  padding: 10px;
}
.table-buttons {
  display: flex;
  gap: 10px;
  float: right;
  padding-bottom: 10px;
}
.status {
  display: inline-block;
  width: 60px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.status.one {
  background-color: #e6f7f1;
  color: #43c393;
}
.status.two {
  background-color: #e5effd;
  color: #348cf8;
}
.status.three {
  background-color: #fff5e6;
  color: #ff9900;
}

/* 发布选项弹窗样式 */
.dialog-content {
}

.publish-selection {
  width: 100%;
}

.selection-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin: 0 0 10px 0;
}

.selection-subtitle {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 0 0 30px 0;
}
.publish-option.border {
  border: 1px solid #348cf8;
}
.publish-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publish-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.primary-option {
  background-color: #409eff;
  color: white;
}

.secondary-option {
  background-color: #f0f9ff;
  color: #333;
  border: 1px solid #e1f3ff;
}

.option-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.primary-option .option-content h4 {
  color: white;
}

.secondary-option .option-content h4 {
  color: #333;
}

.option-content p {
  font-size: 14px;
  margin: 4px 0;
  line-height: 1.4;
}

.primary-option .option-content p {
  color: rgba(255, 255, 255, 0.9);
}

.secondary-option .option-content p {
  color: #666;
}

.publish-option i {
  font-size: 18px;
}

.primary-option i {
  color: white;
}

.secondary-option i {
  color: #409eff;
}
</style>
